import * as React from 'react'
import { Link } from 'react-router-dom'
import { Tabs, Toast } from 'antd-mobile'
import { FlatList, Button, Progress, NavBar } from 'components'
import moment from 'moment'
import './index.less'
import { post, NotBean } from '../../utils'

const colors: string[] = ['#fa4140', '#ff5b28', '#ff7427', '#b224d1', '#ea2888', '#b224d1', '#842aff', '#7d89ff', '#4f96ff', '#15badf', '#09d8bd']
const bgColors: string[] = ['#ffd5d5', '#ffc0ac', '#ffd7bf', '#ffb5da', '#f3baff', '#dbc0ff', '#bfc5ff', '#c2dbff', '#b5f1ff', '#c3ffa9', '#9afff2']

const all = require('../../assets/arrow_s_all.png')
const top = require('../../assets/arrow_s_top.png')
const bot = require('../../assets/arrow_s_bot.png')

export default class BuyBeans extends React.Component<any, any> {

    public state = {
        activeZK: false,
        activeZKNext: false,
        activeNumber: false,
        activeNumberNext: false,
        sourceData: []
    }

    private node: any

    private params: any = {}

    private index: number = 1

    public render(): JSX.Element {
        const { activeZK, activeZKNext, activeNumber, activeNumberNext, sourceData } = this.state
        const tabs = [
            { title: '综合' },
            { title: <span>折扣 <img className="img_row" src={activeZK ? activeZKNext ? bot : top : all} /></span>, key: 'zk' },
            { title: <span>数量 <img className="img_row" src={activeNumber ? activeNumberNext ? bot : top : all} /></span>, key: 'number' }
        ]
        return (
            <div className="buy_beeans buy_beeans_list">
                <NavBar
                    title="最新专区"
                    fixed={true}
                    divider={true}
                />
                <Tabs
                    tabBarUnderlineStyle={{ border: 0 }}
                    tabBarInactiveTextColor="#333333"
                    tabBarActiveTextColor="#fa0000"
                    tabBarTextStyle={{
                        fontSize: '0.75rem'
                    }}
                    swipeable={false}
                    tabs={tabs}
                    onTabClick={this.handleChange}
                    prerenderingSiblingsNumber={0}
                >
                    <FlatList
                        className="buy_beeans_item"
                        data={sourceData}
                        onRefresh={this.getData}
                        ListEmptyComponent={NotBean}
                        ref={(e: any) => { this.node = e }}
                        renderItem={(data: any, index: number) => {
                            const num = ((Number(data.amount) - Number(data.buy_amount)) / Number(data.amount) * 100).toFixed(0)
                            return (
                                <div className="buy_beeans_item_voucher flex" key={index}>
                                    <div className={`zhekou flex_center bg_${Math.round(data.discount) + 1}`}>
                                        <div>
                                            <div className="daze"><span className="DINPro">{data.discount}</span>折</div>
                                            <div className="label">恒豆折扣数</div>
                                        </div>
                                    </div>
                                    <div className="flex_1">
                                        <div className="info">
                                            <div className="number">恒豆数量：<span className="DINPro">{data.amount}</span></div>
                                            <div className="jine">折扣金额：<span className="DINPro">¥ {Number(data.amount) * Number(data.discount) / 10}</span></div>
                                            <div className="time">发布时间：{data.create_time && moment(data.create_time).format('YYYY-MM-DD')}</div>
                                        </div>
                                    </div>
                                    <div className="pros">
                                        <Progress
                                            className="flex_center"
                                            type="dashboard"
                                            size={52}
                                            value={Number(num)}
                                            bgColor={bgColors[Math.round(data.discount)]}
                                            progColor={colors[Math.round(data.discount)]}
                                            extend={<div className="pro" style={{ color: colors[Math.round(data.discount) - 1] }}><div className="pro_label">已抢</div><div className="pro_number">{num}%</div></div>}
                                        />
                                        <Link to={`/beans_order/${data.id}`}>
                                            <Button className={`btn btn_${Math.round(data.discount)  + 1}`}>立即购买</Button>
                                        </Link>
                                    </div>
                                </div>
                            )
                        }}
                    />
                </Tabs>

            </div>
        )
    }

    private getData = (finishLoad: () => void) => {
        if (this.index === 1) {
            Toast.loading('', 0)
        }
        post('beanapi/beanList', {
            ...this.params,
            page: this.index
        }).then((data: any) => {
            if (this.index === 1) {
                setTimeout(() => { Toast.hide(); this.setState({ sourceData: data.data }); finishLoad() }, 500)
            } else {
                if (data.data.length) {
                    const { sourceData } = this.state
                    this.setState({
                        sourceData: sourceData.concat(data.data)
                    })
                    finishLoad()
                }
            }
            this.index++
        })
    }

    private handleChange = (data: any) => {
        this.index = 1
        this.setState({
            activeZK: false,
            activeZKNext: false,
            activeNumber: false,
            activeNumberNext: false
        })
        this.params = {}
        if (data.key === 'zk') {
            this.params = {
                by: 'discount',
                sort: 'ASC'
            }
            const { activeZK, activeZKNext } = this.state
            this.setState({
                activeZK: true,
                activeNumber: false,
                activeNumberNext: false
            })
            if (activeZK) {
                if (!activeZKNext) {
                    this.params = {
                        by: 'discount',
                        sort: 'DESC'
                    }
                }
                this.setState({
                    activeZKNext: !activeZKNext
                })
            }
        }
        if (data.key === 'number') {
            const { activeNumber, activeNumberNext } = this.state
            this.params = {
                by: 'buy_amount',
                sort: 'ASC'
            }
            this.setState({
                activeNumber: true,
                activeZK: false,
                activeZKNext: false
            })
            if (activeNumber) {
                if (!activeNumberNext) {
                    this.params = {
                        by: 'buy_amount',
                        sort: 'DESC'
                    }
                }
                this.setState({
                    activeNumberNext: !activeNumberNext
                })
            }
        }
        this.getData(this.node.finishLoad)
    }
}